<style type="text/css">
.nodePmap>.body>.body { display: inline-block; width: 620px; height: 350px }
.nodePmap .grid { width: 610px; }
.nodePmap .combo .tr { display: block; }
.nodePmap .grid .combo .body { margin-top: 24px; }
.nodePmap .grid .cell { border: 1px solid #CCC; overflow: hidden; height: 20px; }
.nodePmap .grid .cellTf { border: none; height: 20px; width: 100%; }
.nodePmap .grid .cellNf { text-align: right; }
</style>
<script type="text/javascript">
$(function(){
	var pg = App.soagov.nodePmap.ui, pp = pg.params
		, data = pp.data, gd = pg.find('.grid');
	var crs = {}; //changed records
	var dd = []; //data for combobox
	var codeIn = null; //输入code
	var oldCode = null;
	function tfRender(f, r, tr, vw){
		if(!tr.hasClass('selected'))
			return r[f];
		var a = $('<input type="text" class="cellTf" />');
		a.attr('name', f).change(function(){
			r[f] = a.val();
		}).val(r[f]);
		return $('<div class="cell"></div>').append(a);
	}
	function checkDef(t){
		var key=0;
		var temp;
		$.each(gd.data, function(n, c) {
			if(t==n){
				key=1;
				t = prompt('参数英文名重复请重新输入', t);
				temp=t;
			}
		});
		if(key==0){
			if(temp){
				codeIn=temp;
			}else{
				codeIn=t;
			}
		}else if(key==1){
			checkDef(temp);
		}
	}
	gd.onChangeValue = function(r, f, v, b){ 
		var k = r.code, x = crs[k], o = gd.oldData[k] || {};
		b = (b==undefined? (o[f]==v):b);
		if(b){
			if(x){
				delete x[f];
				if($.isEmptyObject(x))
					delete crs[k];
			}
		}else{
			crs[k] = x || {};
			crs[k][f] = v;
		}
	} 
	var cols = [{
		field: 'code', title : '参数英文名', width: 100,
		render: function(r, tr, vw){
			var f = 'code';
			if(codeIn){
				r[f]=codeIn;
			}else{
			}
			var v;
			var a= $('<div class="cell"></div>');
			if(r){
				return a.append(r[f]);
			}
		}
	},{
		field: 'name', title : '参数中文名', width: 100,
		render: function(r, tr, vw){
			if(r){
			var f = 'name';
			if(!tr.hasClass('selected'))
				return r[f];
			var a = $('<input type="text" class="cellTf" />');
			a.attr('name', f).change(function(){
				var v = r[f] = a.val();
				gd.onChangeValue(r, f, v);
			}).val(r[f]);
			return $('<div class="cell"></div>').append(a);
			}
		}
	},{
		field: 'type', title : '类型', width: 80,
		render: function(r, tr, vw){
			var f = 'type';
			if (!tr.hasClass('selected')) {
				return r[f];
			}
			var a = $('<input type="text" class="cellTf" />');
			a.attr('name', f).change(function(){
				var v = r[f] = a.val();
				gd.onChangeValue(r, f, v);
			}).val(r[f]);
			return $('<div class="cell"></div>').append(a);
		}
	},{
		field: 'value', title : 'value', width: 80,
		render: function(r, tr, vw){
			if(r){
			var f = 'value';
			if(!tr.hasClass('selected'))
				return r[f];
			var a = $('<input type="text" class="cellTf" />');
			a.attr('name', f).change(function(){
				var v = r[f] = a.val();
				gd.onChangeValue(r, f, v);
			}).val(r[f]);
			return $('<div class="cell"></div>').append(a);
			}
		}
	},{
		field: 'op', title : '操作', width: 50,
		render: function(r, tr, gd){
			var a = $('<div></div>');
			$('<span class="a"></span>').click(function(){
				var keys = [r.code];
				keys = gd.delRow(keys);
				$.each(keys, function(n, c) {
					delete crs[c];
				});
			}).append('删除').appendTo(a);
			return a;
		}
	}];
	gd.reRenderRow = function(tr){
		var k = tr.attr('name');
		$.each(cols, function(n, c){
			if(c.render && c.field!='code'){
				var td = tr.find('.td[name=' + c.field + ']');
				td.empty().append(c.render(gd.data[k], tr, gd));
			}
		});
	}
	gd.mac('grid', {
		key: 'code',
		cols : cols,
		loader: {
			url: App.ctx + '/face/param/list.do',
			params: { pageNo: 1, pageSize: 50, faceId: pp.faceId, flag: 0 },
			autoLoad: false //TODO 载入已配置的接口的参数
		},
		onRowClick: function(){
			var tr = $(this), sr = gd.selected;
			if(tr.hasClass('selected'))
				return true;
			if(sr)
				gd.reRenderRow(sr.removeClass('selected'));
				gd.selected = tr.addClass('selected');
				gd.reRenderRow(tr);
			return true;
		},
		afterLoad: function(dd, po){
			gd.oldData = mac.eval(JSON.stringify(gd.data));
		}
	});
	gd.loadData(data);
	
	pg.seek('belong').change(function(){
		var v = $(this).val();
		if (v) {
			data.belong = v;
		}
	}).val(data.belong);
	pg.seek('ok').click(function(){
		data = gd.data;
		pg.callback(data);
		pg.close();
	});
	pg.seek('cancel').click(function(){
		pg.close();
	});
	pg.seek('add').click(function(){
		codeIn = prompt("请输入参数英文名", "");
		checkDef(codeIn);
		gd.addRow({'code': codeIn});
	});
// 	$('.toolbar .item').click(function(){
// 		var ec = $(this), act = ec.attr('action');
// 		switch(act){
// 			case 'add':
// 				codeIn = prompt("请输入参数英文名", "");
// 				checkDef(codeIn);
// 				gd.addRow({'code':codeIn});
// 				break;
// 			case 'del':
// 				var keys = $.map(gd.find('input[name=no]:checked'), function(c){
// 					return c.value;
// 				});
// 				keys = gd.delRow(keys);
// 				$.each(keys, function(n, c) {
// 					delete crs[c];
// 				});
// 				break;
// 			case 'chg':
// 				//alert(JSON.stringify(crs));
// 				alert(JSON.stringify(gd.data));
// 				break;
// 		}
// 	});
});
</script>
<div class="form">
	<div class="item">
		<div class="label">映射类</div>
		<input type="text" name="belong" />
	</div>
</div>
<div class="clear"></div>
<div class="body">
	<div class="grid fl"></div>
</div>
<div class="bottom">
	<button name='add'>添加参数</button>
	<button name="ok">确定</button>
	<button name="cancel">取消</button>
	<div class="clear"></div>
</div>